<template>
  <div class="app-container">

     <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
           <el-button
              type="primary"
              plain
              icon="Plus"
              @click="handleAdd"
              v-hasPermi="['profitPrepare:index:add']"
           >新增</el-button>
        </el-col>
        <!-- <el-col :span="1.5">
           <el-button
              type="success"
              plain
              icon="Edit"
              :disabled="single"
              @click="handleUpdate"
              v-hasPermi="['system:post:edit']"
           >修改</el-button>
        </el-col>
        <el-col :span="1.5">
           <el-button
              type="danger"
              plain
              icon="Delete"
              :disabled="multiple"
              @click="handleDelete"
              v-hasPermi="['system:post:remove']"
           >删除</el-button>
        </el-col> -->
        <!-- <el-col :span="1.5">
           <el-button
              type="warning"
              plain
              icon="Download"
              @click="handleExport"
              v-hasPermi="['goods:index:export']"
           >导出</el-button>
        </el-col>
        <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar> -->
     </el-row>

     <el-table v-loading="loading" :data="memberList" @selection-change="handleSelectionChange" :selectable="selectable">

        <el-table-column
          label="金额(元)"
          align="center"
          prop="profit"
          :show-overflow-tooltip="true"
          width="200"
        />

        <el-table-column
          label="日期"
          align="center"
          prop="dateMark"
          :show-overflow-tooltip="true"
          width="200"

        />
        <el-table-column
          label="分润等级"
          align="center"
          prop="level"
          :show-overflow-tooltip="true"
          width="200"

        >
        <template #default="scope">
          {{ scope.row.level}}
        </template>

        </el-table-column>
        <el-table-column
          label="等级名称"
          align="center"
          prop="lvName"
          :show-overflow-tooltip="true"
          width="100"

        />
        <el-table-column
          label="分润类型"
          align="center"
          prop="profitType"
          :show-overflow-tooltip="true"
          width="200"

        />
        <el-table-column
          label="类型名称"
          align="center"
          prop="profitTypeName"
          :show-overflow-tooltip="true"
          width="200"

        />
<!--
        <el-table-column label="状态" align="center" prop="status"  width="100">
           <template #default="scope">
              <dict-tag :options="sys_normal_disable" :value="scope.row.status" />
           </template>
        </el-table-column>
        <el-table-column label="提现状态" align="center" prop="isWithdraw" width="100">
           <template #default="scope">
              <dict-tag :options="sys_normal_disable" :value="scope.row.isWithdraw" />
           </template>
        </el-table-column> -->

        <el-table-column label="创建时间" align="center" prop="createTime" width="200">
          <template #default="scope">
            <span>{{ parseTime(scope.row.createTime) ||'-'}}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作"  align="center" class-name="small-padding fixed-width">
           <template #default="scope">
            <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['profitPrepare:index:edit']">修改</el-button>

           </template>
        </el-table-column>
     </el-table>

     <pagination
        v-show="total > 0"
        :total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
     />

     <!-- 添加或修改会员等级对话框 -->
     <el-dialog :title="title" v-model="open" width="800px" append-to-body>
        <div class="form_box">
          <el-form ref="profitRef" :model="form" :rules="rules" label-width="100px">
            <el-row>
               <el-col :span="12">
                  <el-form-item label="昨日总业绩：" >
                  {{ day_ach }}
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="本周总业绩：" >
                    {{ dot_num }}
                  </el-form-item>

                </el-col>
              <el-col :span="24" style="margin-bottom: 30px;">

                <el-table :data="levelList">
                  <el-table-column label="" align="left" prop="status"  width="100"   :show-overflow-tooltip="true">
                    <template #default="scope">
                        {{ scope.row.name == 'disabled'?'/':scope.row.name}}
                    </template>
                  </el-table-column>
                  <el-table-column label="创客" align="center" prop="status"  width="110"   :show-overflow-tooltip="true">
                    <template #default="scope">
                        {{ scope.row.data.maker == 'disabled'?'/':scope.row.data.maker}}
                    </template>
                  </el-table-column>
                  <el-table-column label="V1" align="center" prop="status"  width="110"   :show-overflow-tooltip="true">
                    <template #default="scope">

                        {{ scope.row.data.v1 == 'disabled'?'/':scope.row.data.v1}}
                    </template>
                  </el-table-column>
                  <el-table-column label="V2" align="center" prop="status"  width="110"   :show-overflow-tooltip="true">
                    <template #default="scope">

                        {{ scope.row.data.v2 == 'disabled'?'/':scope.row.data.v2}}
                    </template>
                  </el-table-column>
                  <el-table-column label="V3" align="center" prop="status"  width="110"   :show-overflow-tooltip="true">
                    <template #default="scope">

                        {{ scope.row.data.v3 == 'disabled'?'/':scope.row.data.v3}}
                    </template>
                  </el-table-column>
                  <el-table-column label="合伙人" align="center" prop="status"  width="110"   :show-overflow-tooltip="true">
                    <template #default="scope">

                        {{ scope.row.data.partner == 'disabled'?'/':scope.row.data.partner}}
                    </template>
                  </el-table-column>
                  <el-table-column label="饭点" align="center" prop="status"  width="110"   :show-overflow-tooltip="true">
                    <template #default="scope">

                        {{ scope.row.data.dot == 'disabled'?'/':scope.row.data.dot}}
                    </template>
                  </el-table-column>
                </el-table>
              </el-col>
              <!-- <el-col :span="12" v-for="(item,index)  in levelList" :key="index">
                <el-form-item :label="item.name+':'" >
                {{ item.level_num }}
                </el-form-item>
            </el-col> -->
            <!-- <el-col :span="12">
              <el-form-item label="今日业绩：" >
              {{ day_ach }}
               </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="总饭点：" >
                {{ dot_num }}
               </el-form-item>

            </el-col> -->
            <el-col :span="12" >
              <el-form-item label="金额" prop="profit">
                <el-input-number v-model="form.profit" controls-position="right" :min="0" style="width: 100%;"  placeholder="请输入金额"></el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="日期" prop="date_mark">
                <el-date-picker
                    v-model="form.date_mark"
                    type="date"
                    placeholder="请选择日期"
                    value-format="YYYY-MM-DD"
                  />
              </el-form-item>
            </el-col>


            <el-col :span="12">
              <el-form-item label="分润等级" prop="level">
                <el-select v-model="form.level" placeholder="请选择分润等级"   style="width: 290px;">
                    <el-option
                        v-for="dict in levelData"
                        :key="dict.pro_id"
                        :label="dict.name"
                        :value="dict.pro_id"
                    ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
           <el-col :span="12">
              <el-form-item label="分润类型" prop="profit_type">
                <el-select v-model="form.profit_type" placeholder="请选择分润类型"   style="width: 290px;">
                    <el-option
                        v-for="dict in profitList"
                        :key="dict.label"
                        :label="dict.value"
                        :value="dict.label"
                    ></el-option>
                </el-select>
              </el-form-item>
            </el-col>





          </el-row>
        </el-form>
        </div>

        <template #footer>
           <div class="dialog-footer">
              <el-button type="primary" @click="submitForm">确 定</el-button>
              <el-button @click="cancel">取 消</el-button>
           </div>
        </template>
     </el-dialog>

  </div>
</template>

<script setup name="goodsManage">
import { getProfitPrepareList,addProfitPrepare,editProfitPrepare,getProfitPrepareReference} from "@/api/profitPrepare/index";
import { ref } from "vue";

const { proxy } = getCurrentInstance();
const { sys_user_sex,sys_normal_disable } = proxy.useDict("sys_user_sex","sys_normal_disable");

const memberList = ref([]);

const open = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const title = ref("");

const memberLevelColumnList = ref([]);
const memberOptions = ref([]);
const memloading = ref(false);

const rechargeOpen =  ref(false);
const changeOpen =  ref(false);
const profitList = ref([]);
const levelList = ref([]);
const levelData  = ref([]);

const day_ach = ref("");
const dot_num = ref("");
const data = reactive({
 form: {},
 queryParams: {
   pageNum: 1,
   pageSize: 10,
   realname: undefined,
    mobile:undefined
 },
 rechargeForm:{},
 changeForm:{},
 rules: {
    date_mark: [
      { required: true, message: "日期不能为空", trigger: ["blur","change"] }
    ],
    level: [
      { required: true, message: "等级不能为空", trigger: ["blur","change"] }
    ],
    profit: [
      { required: true, message: "分润金额不能为空", trigger: ["blur","change"] }
    ],
    profit_type: [
      { required: true, message: "分润类型不能为空", trigger: ["blur","change"] }
    ],
 },

});



const { queryParams, form, rules,rechargeForm,rechargeRules,changeForm,changeRules} = toRefs(data);

/** 查询会员等级列表 */
function getList() {
 loading.value = true;
 getProfitPrepareList(queryParams.value).then(response => {
   memberList.value = response.rows;
   total.value = response.total;
   loading.value = false;
 });
}
/** 取消按钮 */
function cancel() {
 open.value = false;
 reset();
}
/** 表单重置 */
function reset() {
 form.value = {
  date_mark: undefined,
  level: undefined,
  profit: undefined,
  profit_type: undefined,
 };
 proxy.resetForm("profitRef");
}
/** 搜索按钮操作 */
function handleQuery() {
 queryParams.value.pageNum = 1;
 getList();
}
/** 重置按钮操作 */
function resetQuery() {
 proxy.resetForm("queryRef");
 handleQuery();
}
/** 多选框选中数据 */
function handleSelectionChange(selection) {
 ids.value = selection.map(item => item.postId);
 single.value = selection.length != 1;
 multiple.value = !selection.length;
}
/** 新增按钮操作 */
function handleAdd() {
 reset();
 getProfitPrepareReferences();
 memberOptions.value = [];
 open.value = true;
 title.value = "添加分润";

}
/** 修改按钮操作 */
function handleUpdate(row) {
 reset();
 getProfitPrepareReferences();
  form.value = row;
  form.value.date_mark = row.dateMark;
  form.value.profit_type = row.profitType;
   title.value = "修改分润";
   open.value = true;
}



/** 表单重置 */
function changeReset() {
  changeForm.value = {
    memId:undefined,
    inviterId:undefined,
 };
 proxy.resetForm("changeRef");
}

function changePersons(row){
  changeReset();
  changeForm.value.memId = row.memId
  changeOpen.value = true

  proxy.resetForm("changeRef");
}


/** 提交按钮 */
function submitForm() {
 proxy.$refs["profitRef"].validate(valid => {
   if (valid) {

     if (form.value.id != undefined) {
      editProfitPrepare(form.value).then(response => {
         proxy.$modal.msgSuccess("修改成功");
         open.value = false;
         getList();

       });
     } else {
      addProfitPrepare(form.value).then(response => {
         proxy.$modal.msgSuccess("新增成功");
         open.value = false;
         getList();

       });
     }
   }
 });
}
/** 删除按钮操作 */
function handleDelete(row) {
 const id =  row.memId;
 proxy.$modal.confirm('是否确认删除名称为"' + row.realname + '"的数据项？').then(function() {
   return deleteMember(id);
 }).then(() => {
   getList();
   proxy.$modal.msgSuccess("删除成功");
 }).catch(() => {});
}
/** 导出按钮操作 */
function handleExport() {
 proxy.download("system/post/export", {
   ...queryParams.value
 }, `post_${new Date().getTime()}.xlsx`);
}


function remoteMethod(query) {
  if (query !== '') {
    memloading.value = true;
    setTimeout(() => {

      getMemberList({mobile:query}).then(response => {
        memberOptions.value = response.data
       memloading.value = false;
      });

    }, 200);
  } else {
    memberOptions.value = [];
  }
}

function getProfitPrepareReferences(){
  getProfitPrepareReference().then(response => {
    levelData.value  = response.data.level
    levelList.value = response.data.list
    profitList.value = response.data.profit_type
    dot_num.value = response.data.ach.week
    day_ach.value = response.data.ach.yesterday
  })
}

getProfitPrepareReferences();
getList();

</script>
<style lang="scss" scoped>
.form_box {
  // height: 60vh;
  // overflow: auto;
}
</style>
